<template>
    <!-- {{modelData}} -->
    <template v-if="modelData[0]?.cards.length + modelData[1]?.cards.length == 0">
        还没有工程，请点击新建工程创建
    </template>
    <template v-for="im in modelData" v-else>
        <h2 v-if="im?.cards.length">{{ im.name }}</h2>
        <div class="flex-cc card_g">
            <template v-for="im1 in im?.cards">
                <el-card shadow="hover" class="card"
                    @click="() => $router.push({ name: 'edit', params: { children: im1.title }, query: { id: im1.id } })">
                    <img :src="im1.img" />
                    <template #footer>
                        {{ im1.title }}
                    </template>
                </el-card>
            </template>
        </div>
    </template>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { useStore } from '@/stores'
import { get } from '@/request/axiosset';




const store = useStore()
const img = 'https://knowledge.bctools.cn/jvs-public/img/%E9%A3%8E%E6%99%AF/a4.png'
const modelData = reactive([])
//     {
//         name: '置顶工程',
//         cards: [
//             { title: 'test1', img: img },
//             { title: 'test2', img: img },
//             { title: 'test3', img: img },
//             { title: 'test4', img: img },
//         ]
//     },
//     {
//         name: '最近编辑',
//         cards: [
//             { title: 'test1', img: img },
//             { title: 'test2', img: img },
//             { title: 'test3', img: img },
//             { title: 'test4', img: img },
//             { title: 'test5', img: img },
//             { title: 'test6', img: img },
//             { title: 'test7', img: img },
//             { title: 'test8', img: img },
//             { title: 'test9', img: img },
//             { title: 'test10', img: img },
//         ]
//     }
// ])

const getAsideMenu = (e) => {
    modelData[0] = {
        name: '置顶工程',
        cards: e.filter(i => i.isTop).map(i => ({ id: i.id, title: i.name, img: img, isTop: i.isTop }))
    }
}
onMounted(() => {
    if (store.asideMenu) {
        getAsideMenu(store.asideMenu)
    }
    get('/model-info/recentFileList', { size: 10 }).then(res => {
        // console.log('💆‍♂️', res)
        modelData[1] = {
            name: '最近编辑',
            cards: res.data.data.map(i => ({ id: i.id, title: i.name, img: img }))
        }
        // console.log('👅', modelData)
    })
})
watch(() => store.asideMenu, e => getAsideMenu(e), { deep: true })
</script>

<style scoped>
.card_g {
    flex-wrap: wrap;
    justify-content: start;
}

.card {
    max-width: 180px;
    margin: 20px 10px;
    cursor: pointer;

    &>>>.el-card__body {
        padding: 0;
        width: 180px;
        height: 180px;
    }

    &>>>.el-card__footer {
        position: relative;
        height: 50px;
        padding: 10px;
    }

    img {
        width: 100%;
    }

    &:hover {
        transform: translateY(-3px);
        border: 1px solid var(--pyColor);
    }
}
</style>